<template>
  <div style="width: 800px">
    <el-card>
      <div style="display: flex; justify-content: space-between; align-items: center">
        <span style="font-weight: bold; font-size: 18px">爆品榜</span>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 100px; margin-left: 50px"
          @change="fetchData"
        />
      </div>
      <el-table :data="list" style="width: 100%; margin-top: 20px" height="500">
        <el-table-column label="产品信息" width="300">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <img
                :src="scope.row.itemUrl"
                alt=""
                style="width: 50px; height: 50px; object-fit: cover; margin-right: 10px"
              />
              <div>
                <div style="font-weight: bold">{{ scope.row.itemTitle }}</div>
                <div style="font-size: 12px; color: #888">ID: {{ scope.row.itemId }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="gmv" label="销售额" width="120">
          <template #default="scope"> ￥{{ scope.row.gmv.toLocaleString() }} </template>
        </el-table-column>
        <el-table-column prop="itemPrice" label="出单价" width="100" />
        <el-table-column prop="totalCount" label="订单量" width="100" />
        <el-table-column prop="partnerName" label="归属招商" width="120" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'
import { ksStatisticsDailyPageCommodityRequest } from '@/api/test/item-test'

const list = ref(ksStatisticsDailyPageCommodityRequest)
const dateRange = ref([new Date(), new Date()])

const fetchData = async () => {
  // 格式化日期
  const [start, end] = dateRange.value
  const start_date = start.toISOString().slice(0, 10)
  const end_date = end.toISOString().slice(0, 10)
  const url = `https://api.shangboyx.com/api/ks/tz?pageNumber=1&pageSize=15&sortType=3&start_date=${start_date}&end_date=${end_date}&uri=%2Fks%2Fstatistics%2Fdaily%2Fpage%2Fexplosive%2Fproduct`
  const res = await axios.get(url)
  if (res.data.code === 0) {
    list.value = res.data.data.list
  } else {
    list.value = ksStatisticsDailyPageCommodityRequest
  }
}

// onMounted(fetchData)
</script>

<style scoped>
/* 可根据需要自定义样式 */
</style>
